<template>
    <div class="item-container">
        <div class="item-title">{{ title }}</div>
        <detailItem :data="data" />
    </div>
</template>

<script setup>
import detailItem from "@/view/assetStatusDetail/components/detailItem/index.vue";

const { title, data } = defineProps({
  title: {
    type: String,
    required: true
  },
  data: {
    type: Object,
    required: true
  }
});
</script>

<style scoped>
.item-container {
  width: 90%;
  margin-left: 1.3vw;
  margin-top: 1vw;
  height: 90%;
  display: flex;
  flex-direction: column;
}

.item-title {
  width: 10.416667vw;
  height: 1.666667vw;
  line-height: 1.25vw;
  padding-left: 0.520833vw;
  font-size: 1.25vw;
  font-family: homeTime;
  color: #fff;
  text-align: left;
  text-shadow: 0 0 0.364583vw rgba(58, 178, 231, 0.67);
  letter-spacing: 0.104167vw;
  background: url("@/assets/home/titlebase.png");
  background-position: left bottom;
  background-size: 100%;
  background-repeat: no-repeat;
}
</style>